<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>待派发工单查看</title>
</head>
<body>
    <div th:fragment="main" id="checkDispatch" class="checkDispatch">
        <style>
            .content {
                position: relative;
                width: auto;
            }
            .checkDispatch {
                width: 100%;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: #F2F2F2;
                overflow: auto;
            }
            .checkDispatch .checkDispatch_content {
                height:100%;
                overflow: hidden;
            }
            /* 导航条 */
            .checkDispatch .checkDispatch_content .title {
                padding: 20px 0px 20px;
                height: 65px;
                line-height: 25px;
                font-size: 14px;
            }
            .checkDispatch .checkDispatch_content .title .title-content {
                margin: 0;
                padding: 0px 30px;
                list-style: none;
                color: #000;
                background-color: #F2F2F2;
            }
            .checkDispatch .checkDispatch_content .title .title-content li>a {
                color: #000;
            }
            .checkDispatch .checkDispatch_content .title .title-content li>a:hover {
                color: #88B7E0;
            }
            .checkDispatch .checkDispatch_content .title .breadcrumb>li+li:before {
                content: "> ";
                padding: 0 5px;
                color: #000;
            }
            /* 内容 */
            .workOrder-content{
                width: 100%;
                height: calc(100% - 65px);
                padding: 0 5px;
                margin: 0 auto;
                overflow: auto;
            }
            .form-box{
                margin-top: 0 6%;
            }
            .form-group{
                width: 42%;
                margin: 20px 4%;
                padding: 0 15px 10px;
                float: left;
                background-color: #fafafa;
            }
            .group-head{
                color: #4D79BB;
                line-height: 40px;
                border-bottom: 1px solid #666;
                font-size: 14px;
                margin-bottom: 15px;
                position: relative;
            }
            .group-body{
                height: 120px;
                overflow: auto;
            }
            .group-list{
                line-height: 30px;
                text-indent: 10px;
                margin-bottom: 10px;
                position: relative;
                color: #333;
                background-color: #eee;
            }
            .subTask{
                border: 1px solid #25a0b5;
            }
            .subTask .group-list{
                background-color: transparent;
            }
            .subTask .group-body{
                height: 160px;
                overflow: initial;
            }
            .form-label{
                text-align: right;
                margin-bottom: 0;
                padding-right: 10px;
            }
            .form-input{
                width: 70%;
                height: 28px;
                padding: 0px 12px;
                background-color: #fff;
                border: 1px solid #c2cad8;
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
                -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
            }
            .tree-postion{
                display: inline;
                position: relative;
            }
            /* 返回按钮 */
            .checkDispatch_content .goback {
                display: inline-block;
                height: 24px;
                min-width: 24px;
                line-height: 24px;
                margin-right: 30px;
                padding: 0 6px 0 7px;
                text-align: center;
                vertical-align: middle;
                cursor: pointer;
                border-radius: 3px;
                font-size: 14px;
                float: right;
            }
        </style>
        <div class="checkDispatch_content">
            <div class="title">
                <ol class="breadcrumb title-content pull-left">
                    <li><a href="#qualitycontrol-assignmentGroup-dispatch">任务管理</a></li>
                    <li>待派发工单查看</li>
                </ol>
                <a class="btn btn-primary goback" href="#qualitycontrol-assignmentGroup-dispatch">
                    <span>«</span>
                    返回
                </a>
            </div>
            <div class="workOrder-content" id="workOrderContent">
                <!-- 工单内容 -->
            </div>
        </div>
        <script type="text/template" id="workOrderTpl">
            <div class="form-group">
                <div class="group-head">
                    <p>设备列表</p>
                </div>
                <div class="group-body">
                    <div class="group-list">
                        <p>{{deviceId}}</p>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="group-head">
                    <p>设备信息</p>
                </div>
                <div class="group-body">
                    <div class="group-list">
                        <p>产品线:&nbsp;&nbsp;<span>{{productLineName}}</span></p>
                    </div>
                    <div class="group-list">
                        <p>项&nbsp;&nbsp;&nbsp;目: &nbsp;&nbsp;<span>{{projectName}}</span></p>
                    </div>
                    <div class="group-list">
                        <p>设备类型:&nbsp;&nbsp;<span>{{deviceTypeName}}</span></p>
                    </div>
                </div>
            </div>
            {{each subTaskList}}
            <div class="form-group subTask">
                <div class="group-head">
                    <p>子任务</p>
                </div>
                <div class="group-body">
                    <div class="group-list">
                        <label for="workOrderType" class="form-label">工单类型:</label>
                        <input type="text" id="" name="description" class="form-input description" value="{{$value.workOrderTypeName}}" readonly>
                    </div>
                    <div class="group-list">
                        <label for="organizationId" class="form-label">施工单位:</label>
                        <div class="tree-postion">
                            <input type="text" id="" name="organizationId" class="form-input organizationId" value="{{$value.organizationTeamName}}" readonly>
                        </div>
                    </div>
                    <div class="group-list">
                        <label for="" class="form-label">是否审核:</label>
                        <input type="text" id="" name="checkTask" class="" value="{{$value.checkTask}}" readonly>
                    </div>
                    <div class="group-list">
                        <label for="description" class="form-label">备注信息:</label>
                        <input type="text" id="" name="description" class="form-input description" value="{{$value.description}}" readonly>
                    </div>
                </div>
                
            </div>
            {{/each}}
        </script>
        <script>
            var workOrderId = JSON.parse($.cookie("workOrderId"));
            $.ajax({
                url: contextPath + "/workorder/" + workOrderId,
                type: 'GET',
                dataType: "json",
                contentType: "application/json",
                success: function(data){
                    if(data.code == 1){
                        $("#workOrderContent").html(template('workOrderTpl', data.data));
                    }
                },
                error: function(data){
                    toastr.error(data.message, "请求失败");
                }
            });
        </script>
    </div>
</body>
</html>